函数式编程
纯函数
不可变值

vdom和diff算法
h函数
vnode数据结构
patch函数
diff算法升级后只比较同一层级不跨级比较
tag不相同则直接删掉重建不再深度比较
tag和Key两者都相同则认为是相同节点不再深度比较


jsx本质
jsx等同于Vue模板
vue的模板编译出来后会返回一个render函数，里面会对之前的内容进行处理,通过render函数处理后会返回一个vnode,
vnode就能结合patch函数进行渲染
Vue模板不是html
jsx也不是js

const imgElem = <div><p>some text</p><img src={imgUlr}/></div>
转移后
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const imgElem = /*#__PURE__*/_jsxs("div", {
  children: [/*#__PURE__*/_jsx("p", {
    children: "some text"
  }), /*#__PURE__*/_jsx("img", {
    src: imgUlr
  })]
});


合成事件
16之前所有事件都会挂载在documnet上，17后会挂载在root上
react的事件和vue的事件是不一样的，react的事件是自己实现的，不是用的原生事件，react会将原生事件放在nativeEvent上
为什么使用合成事件
1.更好的兼容性和跨平台
2.减少内存消耗，避免频繁解绑
3.方便时间的统一管理
17之后将其挂载到root上是为了方便微前端的使用


setState batchUpdate
setState主流程
newState存入pending队列
是否处于batch upadate
处于就保存组件于update队列
不处于就执行flushBatchUpdate


组件渲染过程
jsx如何渲染为页面
props state
render生成vnode
patch(vnode)

setState之后如何更新页面
setState->dirtyComponent->render生成newVnode->patch(vnode,newVnode)

全流程
